$(function () {
  const layer = layui.layer
  const form = layui.form
  const laypage = layui.laypage
  // 1.因为在发送请求的时候需要携带的参数过多，先预存定义
  const data = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state:'',
  }

  // 2.定义渲染列表函数
  initTable()
  function initTable() {
    $.ajax({
      type: 'GET',
      url: '/my/article/list',
      data,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message)
        // 成功之后，调用模板引擎渲染到Tbody中
        let htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)

        // 页面渲染完成后，调用分页函数
        renderPage(res.total)
      }
    })
  }

  // 3.定义时间过滤器
  template.defaults.imports.dateFormat = function(date) {
    const dt = new Date(date)

    let y = dt.getFullYear()
    let m = padZero(dt.getMonth() + 1) 
    let d = padZero(dt.getDate())

    let hh = padZero(dt.getHours())
    let mm = padZero(dt.getMinutes())
    let ss = padZero(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  }

  // 补零函数
  function padZero(n) {
    return n > 9 ? n : '0' + n
  }

  // 4.初始化文章分类并渲染到select中
  initCate()
  function initCate() {
    $.ajax({
      type: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message)
        
        let htmlStr = template('tpl-cate', res)
        $('#cate_id').html(htmlStr)
        // layui.form 不能动态渲染表单，动态插入的结构，需要调用form.render()方法
        form.render('select')
      }
    })
  }

  // 5.给表单绑定submit时间
  $('#form-search').on('submit', function (e) {
    e.preventDefault()

    // 获取下拉选项的id
    let cate_id = $('#cate_id').val()
    let state = $('#state').val()

    // 给data对象中的cate_id和state 重新赋值
    data.cate_id = cate_id
    data.state = state
    // 赋值完成后重新调用渲染列表函数
    initTable()
  })

  // 6.定义分页函数
  function renderPage(total) {
    // 调用layui中的laypage.render()方法渲染分页的结构
    laypage.render({
      elem: 'page_box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: data.pagesize, //每页显示多条数据
      curr: data.pagenum,  // 默认选中的分页
      jump: function (obj, first) {
        //obj:包含了当前分页的所有参数; first:是否首次，一般用于初始加载的判断
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        // 把获取最新的页码值，赋值给data对象中的pagenum
        data.pagenum = obj.curr

        // 把获取最新的显示数据，赋值给data对象中的pagesize
        data.pagesize = obj.limit
        //首次不执行
        // 如果是首次就不执行下面代码，否则就执行
        if(!first){
          initTable()
        }
      },
      // 分页器显示的具体样式
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits:[2,5,10,20,50]
    })
  }

  // 7.删除功能,通过事件委托的方式
  $('tbody').on('click', '.btn-del', function () {
    // 获取删除按钮个数
    const length = $('.btn-del').length 
    // console.log(length)
    // console.log(length)
    // 获取id
    const id = $('.btn-del').attr('data-id')
    
    layer.confirm('确定要删除吗？', {icon: 3, title:'删除文章'}, function(index){
      $.ajax({
        type: 'GET',
        url: `/my/article/delete/${id}`,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message)
          layer.msg(res.message)

          // 成功之后判断当前页面的删除个数是不是等于1
          if (length === 1) {
            data.pagenum = data.pagenum === 1 ? 1 : data.pagenum - 1 
          }
          initTable()
        }
      })
      layer.close(index);
    });
  })

})

